<template>
  <!-- 选项卡 -->
  <scroll-view class="tabs-container" scroll-x>
    <view class="tabs-view">
      <view @click="hanldeClick(index)" v-for="(item,index) in data" :key="index" class="tabs-item-container" :style="{
        width:width
      }">
        <view class="tabs-item-content">
          <text class="tab-text" :class="[active == index ? 'active-text' : '']">
            {{item.text?item.text:item}}
          </text>
          <uni-icons class="icon-sort" :class="{'icon-sort-active':item.sortValue}" custom-prefix="iconfont"
            type="icon-back" :color="active == index?'#3FD3D1':'#545454'" size="28rpx" v-if="item.sort">
          </uni-icons>
          <view class="abs-border" :class="[active == index ? 'active-border' : '']"></view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
  export default {
    props: {
      // 选项卡列表
      data: {
        type: Array,
        default: () => {
          return []
        }
      },
      active: {
        type: Number,
        default: 0
      },
      width: {
        type: String,
        default: "25%"
      }
    },
    methods: {
      // 导航栏选择
      hanldeClick(index) {
        this.$emit("change", index)
      }
    }
  }
</script>

<style lang="scss">
  .tabs-container {
    height: 106rpx;
    width: 100%;
    padding: 0 32rpx;
    box-sizing: border-box;

    .tabs-view {
      display: flex;
      flex-wrap: nowrap;
      height: 100%;

      .tabs-item-container {
        height: 100%;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .tabs-item-content {
          position: relative;
          display: flex;
          align-items: center;

          // 选项卡文字
          .tab-text {
            color: #666666;
            // writing-mode: horizontal-tb;
            white-space: nowrap;
            font-size: 28rpx;
            line-height: 34rpx;
            font-weight: 500;
          }

          .icon-sort {
            display: inline-block;
            transform: rotateZ(-90deg);
          }

          .icon-sort-active {
            transform: rotateZ(90deg);
          }

          .active-text {
            color: #3FD3D1;
          }

          // 底部滑条
          .abs-border {
            position: absolute;
            width: 60rpx;
            height: 4rpx;
            border-radius: 4rpx;
            background-color: #3FD3D1;
            opacity: 0;
            left: 50%;
            bottom: -8rpx;
            transform: translateX(-50%);
          }

          .active-border {
            opacity: 1 !important;

          }
        }

      }

    }

  }
</style>
